<template>
    <div class="r_main">
        <div class="tabIn">
            <div class="tab">
                折现
            </div>
        </div>
        <div class="form_con">
            <div class="outer">
                <p>主题币折现</p>
                <el-form style="width: 60%;" ref="form" :model="form" label-width="7.81vw">
                    <el-form-item label="兑换比例:">
                        <strong>{{ scale }}%</strong>

                    </el-form-item>
                    <el-form-item label="当前主题币:">
                        <strong>{{ userInfo.coin }}个</strong>
                    </el-form-item>
                    <el-form-item label="折现主题币:">
                        <div style="width: 30%;">
                            <el-input type="number" v-model="nums" :min="0" @input="getNums"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="可获得余额:">
                        <div style="width: 30%;">
                            <el-input type="number" v-model="balance" disabled></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="btns">
                            <el-button type="danger" @click="onSubmit">确定折现</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

</template>
<script>
export default {
    data() {
        return {
            nums: '',
            userInfo: {},
            scale: 0,
            balance: 0,
            form: {
                nums: '',
                bank: '',
                type: 1,
                author: '',
                cardId: '',
            },
        }
    },
    computed: {
        path() {
            return this.$route.path
        }
    },
    mounted() {
        this.getUinfo()
        this.getOption()
    },

    methods: {
        getNums(e) {
            console.log('触发失焦')
            if (this.nums > this.userInfo.coin) {
                this.$message({
                    type: 'error',
                    message: '请重新输入折现主题币!'
                });
                return false
            }

            let sxf = this.nums * this.scale / 100
            // let balance = (this.nums - sxf) / 10
            this.balance = sxf.toFixed(2);
        },
        getOption() {
            let params = {
                type: 'coin_scale'
            }
            this.$api.getOptions(params).then(res => {
                if (res.data.code == 1) {
                    this.scale = res.data.data.coin_scale

                }
            })
        },
        getUinfo() {
            this.$api.getUserInfo().then(res => {
                if (res.data.code == 1) {
                    this.userInfo = res.data.data
                }
            })
        },

        confirm(item) {
            console.log(item);

        },
        onSubmit() {
            let params = {
                nums: this.nums
            }
            this.$api.addDiscount(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.getUinfo()
                    this.nums = ''
                    this.balance = ''
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.r_main {
    width: 100%;


    .tabIn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 23px 0;
        background-color: #E5E5E5;
        position: sticky;
        top: 99px;
        z-index: 99;
        padding: 0 23px;
        height: 60px;

        // border-top: 0.05rem solid #E8E8E8;
        .tab {
            font-weight: bold;
            font-size: 24px;
            color: #1068E7;
        }

        .btn2 {
            cursor: pointer;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            width: 82px;
            text-align: center;
            line-height: 34px;
            height: 34px;
            background: #1068E7;
            border-radius: 17px;
        }

    }

    .form_con {
        min-height: 500px;
        // overflow-y: auto;
    }
}

.outer {
    margin-top: 30px;
    display: flex;
    align-items: flex-start;
    padding-bottom: 20px;
    padding: 0 80px 20px;
    flex-direction: column;

    >p {
        margin-top: 20px;
        font-size: 22px;
        font-weight: bold;
    }
}

.chose {
    button {
        display: inline-block;
        padding: 5px 20px;
        line-height: normal;
        border-radius: 20px;
        background-color: #e7e3e3;
        margin: 0 10px;
        cursor: pointer;
        font-size: 16px;

        &:hover {
            background-color: #F56C6C;
            color: #fff;
        }

        &:focus {
            background-color: #F56C6C;
            color: #fff;
        }
    }
}
@media screen and (max-width:768px) {
    .r_main .tabIn{
        height: 40px;
        padding: 0 20px;
        .tab{
            font-size: 15px;
        }
    }
    .outer{
        p{
            font-size: 15px;
        }
        .el-form{
            border: 1px solid #ccc;
            border-radius: 10px;
            width: 100% !important;
            padding: 10px;
            ::v-deep .el-form-item__label{
                width: auto !important;
             }
            button{
                font-size: 12px;
            }
        }
    }
    .el-form-item__content .btns .el-button {
        width: 100px;
        height: 30px;
        line-height: normal;
    }
    }
</style>